<div *ngIf="!node.childs || node.hideChilds">
  <a
    [routerLink]="node.link"
    [ngClass]="classes"
    title="{{ node.tooltip }}"
    class="nav-menu-item"
    routerLinkActive="selected"
    (click)="drawer?.mode == 'over' && drawer?.close()"
  >
    {{ node.title }}
  </a>
</div>

<div *ngIf="node.childs && !node.hideChilds">
  <a
    *ngIf="node.link != null"
    [routerLink]="node.link"
    [ngClass]="classes"
    title="{{ node.tooltip }}"
    (click)="headerClicked()"
    class="nav-menu-item heading"
    routerLinkActive="selected"
  >
    {{ node.title }}
    <mat-icon class="rotating-icon" svgIcon="chevron-down"></mat-icon>
  </a>

  <button
    *ngIf="node.link == null"
    type="button"
    [ngClass]="classes"
    title="{{ node.tooltip }}"
    (click)="headerClicked()"
    class="nav-menu-item heading"
    [attr.aria-pressed]="isExpanded"
  >
    {{ node.title }}
    <mat-icon class="rotating-icon" svgIcon="chevron-down"></mat-icon>
  </button>

  <div class="heading-children" [ngClass]="classes">
    <app-nav-item
      *ngFor="let node of nodeChilds"
      [level]="level + 1"
      [node]="node"
      [drawer]="drawer"
    ></app-nav-item>
  </div>
</div>
